<template>
  <div class="setting">
    <el-card>
      <el-tabs>
        <el-tab-pane label="角色管理">
          <el-button type="primary" @click="add">+新增角色</el-button>
          <el-table :data="list">
            <el-table-column label="序号">
              <template v-slot="{ $index }">
                <!-- 使用插槽定义序号 -->
                <div>
                  {{ (page.page - 1) * page.pagesize + ($index + 1) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="角色名" prop="name"></el-table-column>
            <el-table-column label="描述" prop="description"></el-table-column>
            <el-table-column label="操作">
              <template v-slot="{ row }">
                <div>
                  <el-button type="text">分配权限</el-button>
                  <el-button type="text" @click="edit(row)">修改</el-button>
                  <el-button type="text" @click="del(row)">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <!--  @size-change="handleSizeChange"
              @current-change="handleCurrentChange" -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.page"
              :page-sizes="[1, 10, 100, 200, 300, 400]"
              :page-size="page.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </el-tab-pane>
        <!-- lazy点击了当前的tab才加载 -->
        <el-tab-pane label="公司信息" lazy>
          <!-- 使用动态组件 -->
          <component :is="'Info'"></component>
        </el-tab-pane>
      </el-tabs>
      <!-- 弹框组件 -->
      <!-- v-model完整版 -->
      <!-- <Dialogitem :isShow="show" @input="show = $event"></Dialogitem> -->
      <!-- v-model简写版 -->
      <!-- <Dialogitem v-model="show"></Dialogitem> -->
      <!-- .sync完整版 -->
      <!-- <Dialogitem :isShow="show" @update:isShow="show = $event"></Dialogitem> -->
      <!-- .sync简写版 -->
      <Dialogitem
        ref="dialogitem"
        :mode="mode"
        :isShow.sync="show"
        :list="list"
        @handleCurrentChange="handleCurrentChange"
        @getData="getData"
      ></Dialogitem>
    </el-card>
  </div>
</template>

<script>
// 导入获取角色列表,,删除api
import { sysRole, sysRoleDel } from '@/api/setting.js'
// 导入添加弹框组件
import Dialogitem from './components/dialogitem.vue'
export default {
  components: {
    Dialogitem,
    Info: () => import('./components/info.vue') //使用异步加载
  },
  data () {
    return {
      mode: 'add',
      show: false,
      list: [],
      page: {
        page: 1,
        pagesize: 1,
        total: 100
      }
    }
  },
  created () {
    // 调用接口
    this.getData()
  },
  methods: {
    // 获取所有角色列表
    async getData () {
      const res = await sysRole(this.page)
      // 存储员工数据
      this.list = res.data.rows
      // 存储总页数
      this.page.total = res.data.total
    },
    // 页容量改变时
    handleSizeChange (size) {
      this.page.pagesize = size
      // 并且回到第一页
      this.page.page = 1
      // 刷新页码
      this.getData()
    },
    // 页码改变时
    handleCurrentChange (page) {
      this.page.page = page
      // 刷新页码
      this.getData()
    },
    // 新增角色
    add () {
      this.show = true
      this.mode = 'add'
    },
    // 删除角色
    del (row) {
      this.$confirm('确认删除改角色吗', '提示').then(async () => {
        // 调用接口
        await sysRoleDel(row.id)
        // 提示
        this.$message.success('删除成功')
        // 刷新回到第一页
        this.handleCurrentChange()
      })
    },
    // 编辑角色
    edit (row) {
      this.show = true
      this.mode = 'edit'
      // 通过ref拿到子组件的实例对象,就可以获取到form的值了,再通过josn方法做一个简单的深拷贝,将当前点击项的数据赋值给from完成数据回显
      this.$refs.dialogitem.form = JSON.parse(JSON.stringify(row))
    }
  }
}
</script>

<style></style>
